<template>
    <div class = "Administratoradd">
        <el-container v-loading = "loading">
            <el-container>
            <el-main>
               <el-breadcrumb separator="/" style="padding-bottom:15px;">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "Home">管理员管理</el-breadcrumb-item>
                <el-breadcrumb-item @click.native = "Home">新增</el-breadcrumb-item>
                </el-breadcrumb>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="头像">
                <el-upload
                :action="this.IP"
                list-type="picture-card"
                :limit="1"
                :file-list="imagesone"
                :data="{type:'image'}"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="ruleForm.headImgId" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item  label="账号" prop="account">
                <el-input
                :rows="3"
                placeholder="请输入账号"
                v-model="ruleForm.account">
                </el-input>
            </el-form-item>
            <el-form-item  label="密码" prop="password">
                <el-input
                :rows="3"
                placeholder="请输入密码"
                v-model="ruleForm.password">
                </el-input>
            </el-form-item>
             <el-form-item  label="姓名" prop="name">
                <el-input
                :rows="3"
                placeholder="请输入姓名"
                v-model="ruleForm.name">
                </el-input>
            </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                  <el-option
                    v-for="item in optionsone"
                    :key="item.name"
                    :label="item.name"
                    :value="item.gender"
                   >
                  </el-option>
                </el-select>
            </el-form-item>
              <el-form-item label="权限" prop = "menuIds">
                <el-checkbox-group v-model="ruleForm.menuIds" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city.serial" :key="city.serial">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            <el-form-item label="区域" prop = "menuIds">
            <el-select
            v-model="areaCode"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择区域">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.addressCode">
            </el-option>
          </el-select>
              </el-form-item>
            <el-form-item style="float:right">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
            </el-form>
            </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
const cityOptions = [{serial:'111',name:'资讯管理'}, {serial:'112',name:'基地管理'},{serial:'113',name:'轮播图管理'},{serial:'114',name:'留言管理'},{serial:'115',name:'管理员管理'},{serial:'116',name:'学校统计'},{serial:'117',name:'基地统计'},{serial:'118',name:'模块统计'},{serial:'119',name:'日志管理'}];
export default {
    data(){
         var validateaccount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else if (value.length < 6 || value.length > 15) {
          callback(new Error('账号长度必须大与6位数小于15位数'));
        }  else {
          callback();
        }
      };
      var validatepassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (value.length < 6 || value.length > 15) {
          callback(new Error('密码长度必须大与6位数小于15位数'));
        } else {
          callback();
        }
      };
      var validategender = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择性别'));
        } else {
          callback();
        }
      };
      var validatename = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
        return{
              options: [{
              addressCode: "331102",
              name: "莲都区"
            }, {
             addressCode: "331181",
              name: "龙泉市"
            }, {
              addressCode: "331121",
              name: "青田县"
            }, {
              addressCode: "331125",
              name: "云和县"
            }, {
              addressCode: "331124",
              name: "松阳县"
            }, {
              addressCode: "331122",
              name: "缙云县"
            }, {
              addressCode: "331123",
              name: "遂昌县"
            }, {
              addressCode: "331126",
              name: "庆元县"
            }, {
              addressCode: "331127",
              name: "景宁畲族自治县"
            }],
            areaCode: [],
            checkAll: false,
            cities: cityOptions,
            dialogVisible:false,
            isIndeterminate: true,
            imagesone:[],
            ruleForm: {
            account:'',
            password: '',
            gender: '',
            name:'',
            headImgId:'',
            menuIds:[],
            },
            position:'',
            rules:{
            account: [
                { validator: validateaccount, trigger: 'blur' }
            ],
            password: [
                { validator: validatepassword, trigger: 'blur' }
            ],
            gender:[
                { validator: validategender, trigger: 'blur' }
            ],
            name:[
                { validator: validatename, trigger: 'blur' }
            ],
            },
            optionsone: [{
            gender: "BOY",
            name: "男"
            }, {
            gender: "GIRL",
            name: "女"
            }],
            api:'',
            loading:false
        }
    },
    created(){
        this.List()        
    },
    methods:{
        List(){
            // this.ruleForm = this.$route.query.item
            this.loading = true
            this.$api.publickey.key().then(res => {
                this.api = res.data
            this.loading = false
            }).catch(err => {
                this.$message.error(err); //登录失败提示错误
            });
            this.$api.leaveamessage.Accesstocountiesandcities().then(res => {
              this.options = res.data
            }).catch(err => {
              console.log(err)
            })
        },
      handleCheckedCitiesChange(value) {
        this.ruleForm.menuIds = value
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      submitForm(formName){
          this.$refs[formName].validate((valid) => {
               if(this.ruleForm.headImgId){
                if (valid) {
                    if(this.ruleForm.menuIds.length > 0){
                    this.loading = true
                    let data = this.$getCode(this.ruleForm.password,this.api)
                    let Add = {
                        account:this.ruleForm.account,
                        password: data,
                        gender: this.ruleForm.gender,
                        name:this.ruleForm.name,
                        headImgId:this.ruleForm.headImgId,
                        menuIds:this.ruleForm.menuIds,
                        areaCode:this.areaCode
                    }
                     this.$api.Basetoaddordelete.AdministratorListadd(Add).then(res => {
                        if(res.code === 200){
                           this.open1('成功','提交成功','success')   
                            this.loading = false
                            this.$router.push('Administratoradd')
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                   
                    } else {
                    this.open1('失败','请选择权限','warning')   
                    }
                    
                } else {
                console.log('error submit!!');
                return false;
                }
            } else {
                this.open1('失败','请上传图片','warning')
            }
            });
      },
      Home(){
            this.$router.push('Administratoradd')
      },
      handleAvatarSuccess(response, file, fileList){
            this.ruleForm.headImgId = file.response.data.id
        },
        handleRemove(file, fileList) {
            this.ruleForm.headImgId = ''
        },
        handlePictureCardPreview(file) {
            this.ruleForm.headImgId = file.url;
            this.dialogVisible = true;
        },
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
    }
}
</script>
<style scoped>

</style>
